/* 
rcc: 定义类组件      react class component
rfc: 定义函数组件   react function component
*/

/* 
State的使用
1. 初始化
  方式一: 在构造器中初始化: this.state = {xxx: value}
  方法二: state = {xxx: value}
2. 读取state数据显示
  this.state.xxx
3. 更新状态显示
  错误方式: 直接更新  this.state.xxx = newValue
  正确的方式: this.setState({xxx: newValue})
*/

import React, { Component } from 'react'

export default class StateTest extends Component {

  constructor() {
    super()
    // 方式一: 在构造器中初始化: this.state = {}
    // this.state = {
    //   count: 2
    // }
  }

  // 1. 初始化状态
  // 方法二: state = {}
  state = {
    count: 1
  }

  render() {
    console.log('render', this)
    // 2. 读取state数据显示
    const count = this.state.count
    return (
      <div>
        <h3>StateTest</h3>
        <button onClick={() => {
          // 3. 更新状态显示
          // 错误方式: 直接更新  this.state.xxx = newValue
          // this.state.count = count + 1  // 不会自动更新
          // 正确的方式: this.setState({xxx: newValue})
          this.setState({count: count + 1})
        }}>点击次数: {count}</button>
      </div>
    )
  }
}
